<!--智慧消防V1.0-login页面-->
<template>
  <div class="login">
    <div class="login_container">
      <img src="../../assets/hm_login/logo.png" alt="">
      <h5 class="title">哈密市消防多维动态处置管理平台</h5>
      <div class="login_form">
        <div class="form_item">
          <i class="el-icon-user"></i>
          <input
            type="text"
            ref="username"
            autofocus
            v-model="loginForm.name"
            placeholder="请输入您的用户名"
          />
        </div>
        <div class="form_item">
          <i class="el-icon-unlock"></i>
          <input
            type="password"
            ref="password"
            @keyup="checkCapslock"
            v-model="loginForm.password"
            placeholder="请输入您的密码"
          />
        </div>
        <!-- <div class="form_yzm">
          <div class="form_item">
            <input type="text" placeholder="请输入验证码">
          </div>
          <div class="yzm"></div>
        </div> -->
        <div class="form_btn" @click="handleLogin">登录</div>
        <!-- <p class="register">
          还没有账号？<a>立即注册</a>
        </p> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value == null) {
        callback(new Error("账号不可为空"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码不可小于六位"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        name: "",
        password: "",
        type: 0,
        ip: sessionStorage.getItem("ip"),
      },
      loginRules: {
        name: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
      capsTooltip: false,
      loading: false,
      otherQuery: {},
      redirect: null,
    };
  },
  mounted() {
    if (this.loginForm.name === "") {
      this.$refs.username.focus();
    } else if (this.loginForm.password === "") {
      this.$refs.password.focus();
    }
  },
  methods: {
    checkCapslock(e) {
      const { key } = e;
      if (key === "Enter") {
        this.handleLogin();
      }
    },
    handleLogin() {
      if (this.loading) return;
      if (!this.loginForm.name) {
        this.$message.error("账号不可为空");
        return;
      }
      if (!this.loginForm.password) {
        this.$message.error("密码不可为空");
        return;
      }
      if (this.loginForm.password.length < 6) {
        this.$message.error("密码不可小于六位");
        return;
      }
      this.loading = true;
      this.$store
        .dispatch("user/login", this.loginForm)
        .then(() => {
          console.log(this.redirect);
          this.$router.push({
            path: this.redirect || "/",
            query: this.otherQuery,
          });
          this.loading = false;
        })
        .catch((error) => {
          this.$notify.error({
              title: '错误',
              message: error.msg
          });
          this.loading = false;
        });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: url("../../assets/hm_login/bg.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
  position: relative;
  .login_container {
    position: absolute;
    top: 40%;
    transform: translate(0, -50%);
    left: 0;
    width: 50%;
    color: #fff;
    text-align: center;
    img {
      width: 20%;
    }
    .title {
      margin-bottom: 30px;
      text-align: center;
      font-size: 50px;
      text-shadow: 0 0 5px #000;
      letter-spacing: 5px;
    }
    .login_form {
      width: 35%;
      margin: 0 auto;
      .form_item {
        background: #3374ff;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        i {
          font-size: 30px;
        }
        input {
          outline: none;
          background: none;
          border: none;
          height: 30px;
          width: 100%;
          line-height: 30px;
          color: #fff;
          font-size: 14px;
          padding: 0 10px;
          box-sizing: border-box;
          &::placeholder {
            color: #fff;
          }
        }
      }
      .form_yzm {
        display: flex;
        .form_item {
          margin-right: 10px;
          margin-bottom: 0;
          flex: 0 0 60%;
        }
        .yzm {
          flex: 1;
          overflow: hidden;
          background: #666;
          border-radius: 5px;
          cursor: pointer;
        }
      }
      .form_btn {
        margin-top: 30px;
        padding: 10px;
        background: #fff;
        color: #3374ff;
        border-radius: 5px;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
      }
      .register {
        margin-top: 10px;
        font-size: 14px;
        display: flex;
        a {
          margin-left: 10px;
          color: #3374ff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
